<template>
    <div>
        <van-row class="editor-box-tit background-fff">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-3">
                消息通知设置
            </van-col>
            <van-col span="8" class="text-align-r color-3 font-2">
                <span class="wancheng"></span>
            </van-col>
        </van-row>
        <div class="ziliao1 clearfix">
            <ul class="clearfix">
                <li>
                    <label class="fl font-3">接受新消息通知</label>
                    <van-switch class="fr vanSwitch" v-model="messageChecked" size=".8rem" @input="isSwitch"/>
                </li>
                <li style="border-top:solid #f5f5f5 .4rem" v-if="messageChecked==true" class="posi">
                    <label class="fl font-3">动态更新通知</label>
                    <van-icon class="fr" name="arrow" size=".8rem" @click="isShow(1)"/>
                    <input class="fr text-align-r font-3" type="text" v-model="dynamics" readonly>
                </li>
                <li class="posi" v-if="messageChecked==true" @click="isShow(2)">
                    <label class="fl font-3">点赞通知</label>
                    <van-icon class="fr" name="arrow" size=".8rem"/>
                    <input class="fr text-align-r font-3" type="text" v-model="snap" readonly>
                </li>
                <li class="posi" v-if="messageChecked==true" @click="isShow(3)">
                    <label class="fl font-3">打赏通知</label>
                    <van-icon class="fr" name="arrow" size=".8rem"/>
                    <input class="fr text-align-r font-3" type="text" v-model="reward" readonly>
                </li>
            </ul>
        </div>
        <van-popup v-model="menuBol" position="bottom" :overlay="true">
            <van-picker show-toolbar :columns="menuArr" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
    </div>
</template>
<script>
    import apiHttp from '../../api/index'

    export default {
        data() {
            return {
                messageChecked: false,
                menuBol: false,
                menuArr: [],
                menuArr1: [
                    {dynamicsKey: "0", dynamicsVal: "我关注的人"},
                    {dynamicsKey: "1", dynamicsVal: "关闭"}
                ],

                menuArr2: [
                    {snapKey: "0", snapVal: "全部"},
                    {snapKey: "1", snapVal: "我关注的人"},
                    {snapKey: "2", snapVal: "关闭"}
                ],
                menuArr3: [
                    {rewardKey: "0", rewardVal: "全部"},
                    {rewardKey: "1", rewardVal: "我关注的人"},
                    {rewardKey: "2", rewardVal: "关闭"}],
                dynamics: "",//动态通知
                snap: "",//点赞通知
                reward: "",//打赏通知
                type: '',
                dynamicsStatus: "",//动态通知状态
                snapStatus: "",//点赞通知状态
                rewardStatus:""//打赏通知状态
            }
        },

        //页面加载
        mounted: function () {
            this.getUserInstall();
        },
        methods: {

            getUserInstall() {
                let that = this;
                apiHttp.apiSetting.getUserInstall('', resp => {
                    if (resp.code == 200) {
                        that.newMsgStatus = resp.data.newMsgStatus;
                        //判断新消息通知开关
                        if (that.newMsgStatus == 0) {
                            that.messageChecked = true;
                        } else if (that.newMsgStatus == 1) {
                            that.messageChecked = false;
                        }
                        //判断动态通知值
                        if (resp.data.dynamicsStatus == 0) {
                            that.dynamics = "我关注的人";
                        } else if (resp.data.dynamicsStatus == 1) {
                            that.dynamics = "关闭";
                        }
                        //判断点赞通知值
                        if (resp.data.snapStatus == 0) {
                            that.snap = "全部";
                        } else if (resp.data.snapStatus == 1) {
                            that.snap = "我关注的人";
                        } else if (resp.data.snapStatus == 2) {
                            that.snap = "关闭";
                        }
                        //判断打赏通知值

                        if (resp.data.rewardStatus == 0) {
                            that.reward = "全部";
                        } else if (resp.data.rewardStatus == 1) {
                            that.reward = "我关注的人";
                        } else if (resp.data.rewardStatus == 2) {
                            that.reward = "关闭";
                        }
                        console.log(resp);
                    } else {
                        console.log(resp.message);
                    }

                })
            },

            //接受新消息通知设置
            isSwitch() {
                let that = this;
                console.log(this.messageChecked);
                if (that.messageChecked == true) {
                    that.newMsgStatus = '0';
                    //会员修改接受新消息状态设置
                    that.updatenewMsgStatus();
                }
                if (that.messageChecked == false) {
                    that.newMsgStatus = '1';
                    //会员修改接受新消息状态设置
                    that.updatenewMsgStatus();
                }
            },

            //会员修改接受新消息状态设置
            updatenewMsgStatus() {
                let that = this;
                apiHttp.apiSetting.updatenewMsgStatus(that.newMsgStatus, '', resp => {
                    if (resp.code == 200) {
                        console.log(resp.message);
                    } else {
                        console.log(resp.message);
                    }
                })
            },

            isShow(index) {
                this.menuBol = !this.menuBol;
                if (index == 1) {
                    let array = new Array();
                    for (let i = 0; i < this.menuArr1.length; i++) {
                        array[i] = this.menuArr1[i].dynamicsVal;
                    }
                    this.menuArr = array;
                } else if (index == 2) {
                    let array = new Array();
                    for (let i = 0; i < this.menuArr2.length; i++) {
                        array[i] = this.menuArr2[i].snapVal;
                    }
                    this.menuArr = array;
                } else {
                    let array = new Array();
                    for (let i = 0; i < this.menuArr3.length; i++) {
                        array[i] = this.menuArr3[i].rewardVal;
                    }
                    this.menuArr = array;
                }
                this.type = index;

            },

            onConfirm(value, index) {
                let that = this;
                if (this.type == 1) {
                    this.dynamics = value;
                    that.dynamicsStatus=index;//动态通知状态
                    that.updatedynamicsStatus()
                } else if (this.type == 2) {
                    console.log(index);
                    this.snap = value;
                    that.snapStatus=index;//点赞通知状态
                    that.updatesnapStatus();
                } else {
                    console.log(index);
                    this.reward = value;
                    that.rewardStatus=index;//打赏通知状态
                    that.updaterewardStatus();

                }
                that.menuBol = false
            },

            //会员修改动态通知状态设置
            updatedynamicsStatus(){
                let that = this;
                apiHttp.apiSetting.updatedynamicsStatus(that.dynamicsStatus,'',resp=>{
                    if(resp.code==200){
                        console.log(resp.message);
                        that.getUserInstall();
                    }else {
                        console.log(resp.message);
                    }
                })
            },
            //会员修改点赞通知状态设置
            updatesnapStatus(){
                let that = this;
                apiHttp.apiSetting.updatesnapStatus(that.snapStatus,'',resp=>{
                    if(resp.code==200){
                        console.log(resp.message);
                        that.getUserInstall();
                    }else {
                        console.log(resp.message);
                    }
                })
            },
            //会员修改打赏通知状态设置
            updaterewardStatus(){
                let that = this;
                apiHttp.apiSetting.updaterewardStatus(that.rewardStatus,'',resp=>{
                    if(resp.code==200){
                        console.log(resp.message);
                        that.getUserInstall();
                    }else {
                        console.log(resp.message);
                    }
                })
            },
            //取消
            onCancel() {
                let that = this;
                that.menuBol = false

            }
        }
    }
</script>

<style scoped>
    .ziliao1 li {
        height: 1.8rem;
        line-height: 1.8rem;
        color: #333;
        font-size: .52rem;
        border-bottom: #eeeeee solid .02rem;
        padding: 0 .6rem;
    }

    .van-switch--on {
        background-color: #D84E4D;
    }

    .vanSwitch {
        margin-top: .4rem;
    }

    .van-icon-arrow {
        margin-top: .4rem;
        margin-left: .4rem;
    }

</style>
